<template>
  <div class="container">
    <div class="product">
      <img :src="orderGoods.goods_thumb" alt="">
      <p>{{orderGoods.goods_name}}</p>
    </div>
    <group class="clear-margin">
      <x-textarea v-model="comment.content" :height="120" placeholder="亲，您对这个商品满意吗？"></x-textarea>
    </group>
    <div class="rank">
      <div class="title">
        <i class="iconfont icon-daishouhuo1"></i> 服务评分
      </div>
      <p><span>商品评分</span><rater :margin="5" star="<span class='iconfont icon-xing1'></span>" active-color="#e02e24" v-model="comment.goods_rank"></rater></p>
      <p><span>物流评分</span><rater :margin="5" star="<span class='iconfont icon-xing1'></span>" active-color="#e02e24" v-model="comment.deliver_rank"></rater></p>
      <p><span>服务评分</span><rater :margin="5" star="<span class='iconfont icon-xing1'></span>" active-color="#e02e24" v-model="comment.service_rank"></rater></p>
    </div>
    <div class="btn">
      <x-button type="warn" @click.native="submit" :show-loading="loading">提交评价</x-button>
    </div>
  </div>
</template>
<script>
import { Group, XTextarea, Rater, XButton } from 'vux'
export default {
  name: 'carts',
  components: {
    XTextarea,
    Group,
    Rater,
    XButton
  },
  data () {
    return {
      orderGoods: {},
      comment: {
        goods_rank: 5,
        service_rank: 5,
        deliver_rank: 5,
        content: '',
        order_id: this.$route.params.order,
        goods_id: 0
      },
      loading: false
    }
  },
  mounted () {
    this._getData()
  },
  methods: {
    submit () {
      if (this.comment.content === '') {
        this.$vux.alert.show('请输入评价内容')
        return false
      }
      this.loading = true
      this.$http.post('/comments', this.comment).then((response) => {
        this.$vux.toast.show('评价成功')
        this.loading = false
        this.$router.go(-1)
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    _getData () {
      this.$vux.loading.show()
      this.$http.get('/orderGoods/' + this.$route.params.product).then((response) => {
        this.orderGoods = response.data
        this.comment.goods_id = response.data.goods_id
        this.$vux.loading.hide()
      }).catch((error) => {
        console.log(error)
        this.$vux.loading.hide()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
    height: 100%;
    background-color: #f2f2f2;
  }
  .product {
    background-color: #fff;
    padding: 15px 10px;
    img {
      width: 30px;
      float: left;
      margin-right: 5px;
    }
    p {
      font-size: 14px;
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      padding-bottom: 5px;
      color: #151516;
    }
  }
  .rank {
    padding: 10px;
    background-color: #fff;
    margin-top: 6px;
    .title {
      padding: 5px 0;
      i {
        margin-right: 5px;
      }
    }
    p {
      line-height: 2;
      span {
        margin-right: 10px;
        color: #999;
      }
    }
  }
  .clear-margin {
    margin-top: -15px;
  }
  .btn {
    padding: 15px;
  }
</style>
